<extend name="Public/base"/>
<block name="content">
    <table class="layui-table" lay-data="{height:350, url:'{:U('Admin/ajaxLst')}',page: true,limit: 6}">
        <thead>
        <tr>
            <th lay-data="{field:'id', width:80, fixed:true, unresize: true, sort: true}">ID</th>
            <th lay-data="{checkbox:true}"></th>
            <th lay-data="{field:'username', width:120, templet: '#usernameTpl'}">用户名</th>
            <th lay-data="{field:'phone', width:150}">电话</th>
            <th lay-data="{field:'email', width:150}">邮箱</th>
            <th lay-data="{fixed: 'right', toolbar: '#barDemo', width:150, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <div class="layui-hide" id="barDemo">
        <a class="layui-btn layui-btn-mini" lay-event="detail" href="javascript:;">查看</a>
        <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="edit" href="javascript:;">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" href="javascript:;">删除</a>
    </div>

</block>
<block name="js">
    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.on('tool', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                console.log(data.goods_pic);//当前行数据

                var $ = layui.jquery;
                if (layEvent === 'detail') { //查看
                    //do somehing

                    layer.open({

                        type: 1, //Page层类型
                        area: ['500px', '300px'],
                        title: '用户头像 -可能存在无头像用户',
                        shade: 0.6, //遮罩透明度
                        maxmin: true, //允许全屏最小化
                        anim: 5,//0-6的动画形式，-1不开启
                        content: '<div><img   style=" margin-left: 90px; " src="' + data.pic + '"><br>管理员密码：<input value="' + data.password + '" disabled /></div>'
                    });

                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);//向服务端发送删除指令


                        $.post("{:U('Admin/del')}", data, function (e) {

                            if (e.code == 0) {
                            }
                            obj.del(); //删除对应行（tr）的DOM结构
                            window.location.reload();
                        }, 'json')

                    });
                } else if (layEvent === 'edit') { //编辑
                    layui.layer.open({
                        //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        content: '用户名:<input  name="username" value="' + data.username + '"><br>' +
                        '电话:<input  type="tel" name="phone" value="' + data.phone + '"><br>' +
                        '邮箱:<input  name="email" value="' + data.email + '">' +
                        '<input  name="id" value="' + data.id + '" type="hidden">',
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var linkJson = {};
                            linkJson.id = $('input[name="id"]').val();
                            linkJson.username = $('input[name="username"]').val();
                            linkJson.phone = $('input[name="phone"]').val();
                            linkJson.email = $('input[name="email"]').val();
                            //按钮【按钮一】的回调
                            $.post("{:U('Admin/up')}", linkJson, function (e) {
                                if (e == 0) {

                                }
                            }, 'json')
                            layui.layer.close(index);//向服务端发送编辑指令
                            window.location.reload();
                        },

                        btn2: function (index, layero) {
                            //按钮【按钮二】的回调

                            //return false 开启该代码可禁止点击该按钮关闭
                        },
                        cancel: function () {
                            //右上角关闭回调

                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });

                }
            });
        });
    </script>
</block>
